<template>
	<view>
		<!-- 套餐1 -->
		<view v-if="tabListNum==1">
			<view class="headInformation">
				<!-- 签到悬浮 -->
				<image @click="signFn()" class="signImg" src="../../static/会员卡yi/微信图片_20240320154546.png" mode="">
				</image>
				<view class="backgroundColor">
					<!-- 头像信息 -->
					<view class="headformation flex-between" v-if="userInfo">
						<view class="flex" @click="improveInformationFn()">
							<image class="avater" :src="userInfo.avatar" mode=""></image>
							<view style="margin-left: 10rpx; " class="flex-column-start">
								<view style="color: #fff;font-size: 32rpx;margin-bottom: 8rpx;">
									{{userInfo.nickname}}
								</view>
								<view class="memberType">
									{{userInfo.level_name}}
								</view>
							</view>
						</view>
						<view class="membershipCode" @click="memberCard()">
							<image class="codeImage" src="../../static/会员卡首页1/组合 2.png" mode=""></image>
							<view style="color: #fff;">
								会员码
							</view>
						</view>
					</view>
					<!-- 数据明细 -->
					<view class="flex-around dataDetails">
						<view class="" v-for="(item,i) in dataDetails" :key="i">
							<view style="color: #fff;font-size: 36rpx;">
								{{totelName(item.number)}}
							</view>
							<view style="color: #fff;font-size: 24rpx;">
								{{item.text}}
							</view>
						</view>

					</view>

					<!-- 会员充值 -->
					<view class="memberRecharge flex-column-start">
						<view class="flex-between">
							<view style="font-size: 32rpx;font-weight: 600; margin-bottom: 10rpx;">
								会员成长
							</view>
							<view class="recharge flex" @click.stop="rechargeFn()">
								<span>立即充值</span>
								<uni-icons type="right" size="1" color='#fff'></uni-icons>
							</view>
						</view>
						<!-- 会员进度条 -->
						<pro-gress :list="Steps" :StepInfo="StepInfos"></pro-gress>
						<!--  -->
						<!-- 	<view style="font-size: 11px;font-weight: 400;color: rgb(102, 102, 102);margin-top: 10rpx;">
							V1 再消费100点升级铂金
						</view> -->
					</view>
					<!-- 我的订单 -->
					<view class="myOrderCard">
						<view class="flex-between myOrder">
							<text style="font-size: 30rpx;font-weight: 600;">我的订单</text>
							<text @click="checkAllOrderFn()">查看全部<uni-icons type="right" size="14"
									color='rgb(153, 153, 153)'></uni-icons></text>
						</view>
						<view class="flex-wrap-justifyAround" style="margin-top: 20rpx;">
							<block v-for="(item, i) in menuNavigationList" :key="i">
								<view class="flex-column " @click="checkOrderFn(item)">
									<image class="avaterIcon" :src="item.img" mode=""></image>
									<view class="rightContent">
										<view class="authorizationTitle">{{ item.text }}</view>
									</view>
								</view>

							</block>
						</view>


					</view>
					<!-- 轮播图 -->

					<view class="carouselChart">
						<liu-slide-img :heightNumber="190" :list="list" :autoplay="autoplay" :interval="interval"
							@change="change" @click="click"></liu-slide-img>
					</view>
					<!-- 其他配置 -->
					<view class="myOrderCard">
						<view class="flex-between myOrder">
							<text style="font-size: 30rpx;font-weight: 600;">其他配置</text>

						</view>
						<view class="flex-wrap-flex-start" style="margin-top: 20rpx;">
							<block v-for="(item, i) in otherNavigationList" :key="i">
								<view class="flex-column infoBox" @click="navTo(item)">
									<image class="avaterIcon" :src="item.img" mode=""></image>
									<view class="rightContent">
										<view class="authorizationTitle">{{ item.text }}</view>
									</view>
								</view>

							</block>
						</view>


					</view>
					<view style="padding: 30rpx 0 50rpx 0;" class=" flex-column">
					<!-- 	<image class="companyIcon margin-bottom_10rpx" :src="getConfig.gongzonghao_icon" mode="">
						</image> -->
						<text style="color: #666666">{{getConfig.skill_name}}</text>
					</view>
				</view>
			</view>


		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class=" gzhCard">
					<view style="text-align: center;" class="margin-top_100rpx">
						余额变动、商城订单状态、会员日、 消息、及时推送信息等等
						<image class="qrcode" :src="getConfig.gongzonghao_qr_code" mode=""></image>
						<view class="font-weight_bold">
							关注公众号 享受更好服务
						</view>
					</view>

				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="myPackagePopups">
			<template v-slot:content>

				<view class=" backgroundImg" :style="{ '--bg-image': `url(${getConfig.distribution_poster})` }">


					<image class="qrcode" :src="userInfo.invite_url" mode=""></image>




				</view>

			</template>
		</sunui-popup>



	</view>
</template>

<script>
	import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
	import proGress from '@/components/progress/progress.vue';
	export default {
		components: {
			TabBar,
			proGress
		},
		props: {

			// 多模版table列表展示
			tabListNum: {
				type: Number,
				default: 1
			}
		},
		data() {

			return {
				tabIndex: 0,

				// 数据明细
				dataDetails: [{
						number: 3.00,
						text: '我的余额'
					},
					{
						number: 3.00,
						text: '我的卡券'
					},
					{
						number: 18000,
						text: '套餐卡'
					},
					{
						number: 1568,
						text: '我的积分'
					},
				],
				StepInfos: {

				},
				Steps: [],
				menuNavigationList: [{
						img: '../../static/会员卡首页1/组合 311.png',
						text: '待支付',
						index: 1
						// url: '/pages/statistics/index/index'
					},
					{
						img: '../../static/会员卡首页1/组合 310.png',
						text: '待发货',
						// url: '/pages/merchantConfiguration/merchantConfiguration',
						index: 2
					},
					{
						img: '../../static/会员卡首页1/组合 309.png',
						text: '待收货',
						index: 3
						// url: '/pages/withdrawal/withdrawa-account/withdrawa-account'
					},
					{
						img: '../../static/会员卡首页1/组合 308.png',
						text: '已完成',
						index: 5
						// url: '/pages/service-area/service-area'
					},


				],
				// 轮播图
				list: [{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/32/cartoon-5190837_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2020/05/19/13/35/cartoon-5190860_1280.jpg"
					},
					{
						src: "https://cdn.pixabay.com/photo/2022/03/31/14/53/camp-7103189_1280.png"
					}
				],
				autoplay: true,
				interval: 5000,
				// 其他配置
				otherNavigationList: [
					// {
					// 	img: '../../static/会员卡首页1/组合 55.png',
					// 	text: '充值中心',

					// 	url: '/pages/voucherCenter/voucherCenter'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 56.png',
					// 	text: '分销中心',
					// 	url: '/pages/distribution/distribution',

					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 312.png',
					// 	text: '优惠券',

					// 	url: '/pages/couponPage/couponPage'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 313.png',
					// 	text: '个人信息',

					// 	url: '/pages/improveInformation/improveInformation'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 320.png',
					// 	text: '收支记录',

					// 	url: '/pages/revenueRecords/revenueRecords'
					// },

					// {
					// 	img: '../../static/会员卡首页1/组合 319.png',
					// 	text: '充值记录',

					// 	url: '/pages/revenueRecords/revenueRecords'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 57.png',
					// 	text: '套餐卡',

					// 	url: '/pages/packageCard/packageCard'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 314.png',
					// 	text: '推广海报',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 318.png',
					// 	text: '提现记录',

					// 	url: '/pages/distribution/distributionRecords/distributionRecords'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 317.png',
					// 	text: '我的团队',

					// 	url: '/pages/distribution/myFans/myFans'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 371.png',
					// 	text: '地址管理',

					// 	url: '/pages/addressManagement/addressManagement'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 316.png',
					// 	text: '在线客服',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 485.png',
					// 	text: '进入后台',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 930.png',
					// 	text: '关注公众号',

					// 	// url: '/pages/service-area/service-area'
					// },
					// {
					// 	img: '../../static/会员卡首页1/组合 995.png',
					// 	text: '领券中心',

					// 	url: '/pages/couponCenter/couponCenter'
					// },

				],
				token: uni.getStorageSync('login').token,
				userInfo: null,
				getConfig: null




			}
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()

		},
		mounted() {
			this.init()
		},

		onLoad() {

		},
		onShow: function() {


		},
		computed: {
			totelName: function() {
				return function(num) {

					if (num >= 10000) {
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else {
						return num.toString();
					}
				};
			}
		},
		methods: {
			memberCard() {
				this.$sun.navGo('/pages/qRCodePayment/qRCodePayment')
			},

			rechargeFn() {
				this.$sun.navGo('/pages/voucherCenter/voucherCenter')
			},
			async init() {

				const res = await this.$http.post({
					url: this.$api.getConfig,
					data: {

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				if (res.code == 0) {
					this.getConfig = res.data

				}

				// 获取用户等级
				const result = await this.$http.post({
					url: this.$api.userLevel,
					data: {

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})
				console.log(result)


				// 获取等级列表
				if (result.code == 0) {

					// dataDetails

					this.Steps = result.data.map((item) => {
						return {
							p_price: item.name,
							p_number: item.id
						}
					})

					// 这里需要根据login id来判断当前是在什么等级
					let level_id = uni.getStorageSync('login').level_id

					const index = this.Steps.findIndex((item) => {
						return item.p_number == level_id
					})


					// StepInfos: {
					// 	// 0 33 66 99
					// 	Current: 66, //百分比（先传条数即可）
					// 	Sum: 4 //共多少步骤(Number类型)
					// },
					console.log(index)
					let dd = (100 / (Number(this.Steps.length) - 1)) * index;
					console.log(dd)
					this.StepInfos = {
						// 0 33 66 99
						Current: dd, //百分比（先传条数即可）
						Sum: this.Steps.length //共多少步骤(Number类型)
					}
					console.log(this.StepInfos)




					this.$sun.toast(result.msg, 'none')


				} else {

					this.$sun.toast(result.msg, 'none')
				}

				const resTool = await this.$http.post({
					url: this.$api.module,
					data: {
						type: 1,
						
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})


				console.log(resTool)
				if (resTool.code == 0) {
					console.log(resTool)
					
					this.otherNavigationList = resTool.data.map((item) => {
						return {
							img: item.icon,
							text: item.name,
							url: item.link,
							id: item.id,
							fixed_name:item.fixed_name

						}
					})

				} else {

					this.$sun.toast(resTool.msg, 'none')
				}
				// 轮播图

				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {
						type: 1
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {



					console.log(resPoster.data)
					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.list = resPoster.data.filter(item => item.type === 1);

					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
				// 获取用户信息

				const ress = await this.$http.post({
					url: this.$api.userinfo,
					data: {
						id: uni.getStorageSync('userId'),

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (ress.code == 0) {

					this.userInfo = ress.data

					this.dataDetails.forEach((item) => {
						switch (item.text) {
							case '我的余额':
								item.number = ress.data.balance;
								break;
							case '我的卡券':
								item.number = ress.data.coupon_num;
								break;
							case '套餐卡':
								item.number = ress.data.package_num;
								break;
							case '我的积分':
								item.number = ress.data.surplus_integral ? ress.data.surplus_integral : ress
									.data.integral;
								break;
								// 可根据实际情况继续添加其他匹配条件
						}
					})


				} else {

					this.$sun.toast(ress.msg, 'none')
				}

			},
			// 修改信息(资料)
			improveInformationFn() {
				this.$sun.navTo('/pages/improveInformation/improveInformation')


			},
			change() {

			},
			scanFns(item) {
				console.log(item)
				this.$refs.myPackagePopups.show({
					style: 'padding:50rpx;',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});



			},
			navTo(item) {
				console.log(item)
				// 如果是公众号就弹出公众号二维码
				if (item.fixed_name == '关注公众号') {
					this.scanFn()
					return
				}
				// 进入后台
				if(item.fixed_name == '进入后台'){
					console.log('进入后台')
					uni.setClipboardData({
						data: item.url
					});
				}
				// 在线客服
				if(item.fixed_name =='在线客服'){
					console.log('在线客服')
				this.$sun.phone(item.url)
					// uni.setClipboardData({
					// 	data: item.url
					// });
				}
				// 推广海报
				if (item.fixed_name == '推广海报') {
					if(this.getConfig.distribution_level==0){
						// 
						this.$sun.toast('请开启分销','none')
					}else{
						this.scanFns()
						return
					}
				}
				
				 // 分销中心
				if (item.fixed_name == '分销中心') {
					console.log('分销中心')
					this.$sun.navRe('/pages/firstPage/firstPage', {
						currentIndex: 4
					})
					// 套餐卡
				} else if (item.fixed_name == '我的套餐卡') {
					this.$sun.navRe('/pages/firstPage/firstPage', {
						currentIndex: 3
					})
							
				}else if (item.fixed_name == '我的团队') {
					if(this.getConfig.distribution_level==0){
						// 
						this.$sun.toast('请开启分销','none')
						return
					}
				      this.$sun.navGo(item.url);
				 } else {
					this.$sun.navGo(item.url);
				}

			},
			scanFn() {
				this.$refs.myPackagePopup.show({
					style: '',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			},
			signFn() {
				// 跳转到签到页面
				this.$sun.navGo('/pages/signIn/signIn');
			},
			// 查看全部订单
			checkAllOrderFn() {

				this.$sun.navGo('/pages/orderManagement/orderManagement');
			},
			checkOrderFn(item) {
				this.$sun.navGo('/pages/orderManagement/orderManagement', {
					currentIndex: item.index
				});
			}
		}
	}
</script>
<style>
	page {
		background: #f6f6f6;
	}
</style>
<style lang="less" scoped>
	.backgroundImg {

		width: 696rpx;
		height: 994rpx;
		background-repeat: no-repeat;
		background-size: contain;
		background-image: (var(--bg-image));
		position: relative;

		.qrcode {
			width: 245rpx;
			height: 245rpx;
			position: absolute;
			bottom: 224rpx;
			left: 230rpx;
		}
	}

	.gzhCard {
		background-repeat: no-repeat;
		padding: 80rpx;
		// background-color: #fff;
		background-size: contain;
		background-image: url('../../static/bg 1.png');
		height: 708rpx;
		width: 650rpx;

		.qrcode {
			margin: 20rpx 0;
			width: 251.02rpx;
			height: 251.2rpx;
		}
	}

	.headInformation {
		position: relative;

		.signImg {
			position: fixed;
			width: 86.54rpx;
			height: 84rpx;
			right: 0;
			bottom: 10%;
		}

		.backgroundColor {
			width: 750rpx;
			height: 394rpx;
			// position: absolute;
			// z-index: 9;
			// right: 20rpx;
			// top: 36rpx;
			background: url('../../static/会员卡首页1/矩形 1192.png');
			background-repeat: no-repeat;
			background-size: cover;
			text-align: center;

			.headformation {
				margin-bottom: 16rpx;

				.avater {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}

			.memberType {
				/* 矩形 1043 */
				color: rgb(186, 128, 0);
				font-family: 思源黑体;
				font-size: 24rpx;
				font-weight: 400;
				border-radius: 12rpx;
				width: 112rpx;
				height: 36rpx;
				background-color: #FFDC8F;
			}

				.membershipCode {
					.codeImage {
						width: 48rpx;
						height: 48rpx;
					}
				}
			}

			.dataDetails {}

			.memberRecharge {
				border-radius: 20rpx;
				margin-top: 18rpx;
				background: linear-gradient(102.41deg, rgb(245, 221, 158) 0.753%, rgb(255, 220, 143) 99.163%);
				width: 700rpx;
				height: 180rpx;
				padding: 30rpx 16rpx 35rpx;
				position: relative;

				.recharge {
					text-align: center;
					border-radius: 20rpx 8rpx 0rpx 20rpx;
					width: 132rpx;
					height: 52rpx;
					position: absolute;
					right: 0;
					color: #fff;
					font-size: 24rpx;
					padding-left: 10rpx;
					background: linear-gradient(97.97deg, rgb(66, 66, 66) 0.775%, rgb(73, 73, 73) 98.916%);
				}
			}

			// 我的订单
			.myOrderCard {
				width: 690rpx;

				border-radius: 20rpx;
				margin-top: 22rpx;
				background: rgb(255, 255, 255);
				padding: 24rpx 24rpx;

				.myOrder {
					padding-bottom: 25rpx;
					border-bottom: 2rpx solid rgb(237, 237, 237);
				}

				.avaterIcon {
					width: 70rpx;
					height: 70rpx;
					margin-bottom: 14rpx;
				}

				.infoBox {
					width: 25%;
					margin-bottom: 10rpx;
				}

				.rightContent {
					.authorizationTitle {
						color: rgb(51, 51, 51);
						font-size: 28rpx;
						// font-weight: 600;
						margin-bottom: 20rpx;
					}

					.moreToolTitle {
						color: #666666;
						font-size: 28rpx;
						font-weight: 600;
						margin-bottom: 11rpx;
					}

					.authorizationText {
						color: #666;
						font-family: Inter;
						font-size: 24rpx;
					}
				}
			}

			;

			.companyIcon {
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
			}

			// 轮播图
			.carouselChart {
				margin-top: 20rpx;
				width: 690rpx;
				height: 188rpx;
				border-radius: 20rpx;
				// background: linear-gradient(102.41deg, rgb(245, 221, 158) 0.753%, rgb(255, 220, 143) 99.163%);


			}

			padding: 68rpx 26rpx 0;
		}
	}
</style>